<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>我的</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weixin.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			document.writeln("<script type=\"text/javascript\" src=\"js/common.js?"+ Math.random() + "\"></scr"+"ipt>");
		</script>
		
		<!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->
		<style>
			#footer{  background-color: #f2f2f2; }
	        #footer ul li{ background: url() no-repeat center 5px; text-align: center; color: #666666;}
	        #footer ul li.active{ color: #282828; }
	        #footer ul li:nth-child(1){ background-image: url(icon/home.png); }
	        #footer ul li:nth-child(2){ background-image: url(icon/buy.png); }
	        #footer ul li:nth-child(3){ background-image: url(icon/me.png); }
	        #footer ul li:nth-child(1).active{ background-image: url(icon/home_hover.png); }
	        #footer ul li:nth-child(2).active{ background-image: url(icon/buy_hover.png); }
	        #footer ul li:nth-child(3).active{ background-image: url(icon/me_hover.png); }
			#tabs div:after{
			    content: "";
			    position: absolute;
			    display: block;
			    width: 0;
			    height: .25rem;
			    background-color: #282828;
			    bottom: 0;
			    left: 50%;
			    transition: all .4s;
			    transform: translate(-50%,0);
			}
			#tabs div.active:after{
				width: 2.5rem;
			}
			em.down img{
				transform:rotateZ(180deg);
				-webkit-transform:rotateZ(180deg);
			}
			.item{
			    justify-content: space-between;
				padding: 1.1rem 0;
				border-bottom: 1px #e5e5e5 solid;
				display: flex;
			}
			.item b{
				margin-bottom:0.833333rem;
				display: block;
				line-height: 1.833333rem;
				font-size: 1.5rem;
			}
			.item em{
			    display: block;
			    width: 3.666666rem;
			    height: 1.833333rem;
			    border: 1px solid #666;
			    border-radius: 0.549999rem;
			    text-align: center;
			    line-height: 1.833333rem;
			    font-size: 1.166666rem;
			}
			#wpr{
			    color: #666;
			    font-size: 1.25rem;
			    line-height: 1.5rem;
			}
			#wpr .item:nth-last-child(1){
				border: none;
			}
			.back-c {
			    background-position: center center;
			    background-size: contain;
			    background-repeat: no-repeat;
			}
			.p-r{
				position: relative;
				line-height: 33px;
			}
			.left span{
				float: left;
				width: 3.33rem;
				height: 3.33rem;
				display: inline;
				margin-right: .83rem;
				border-radius: 50%;
				background-position: center center;
			    background-size: contain;
			    background-repeat: no-repeat;
			}
			.buy{
			    float: right;
			    width: 7.083333rem;
			    line-height: 2.5rem;
			    background: -webkit-gradient(linear,center top,center bottom,from(#F7BA64),to(#ED8434));
			    border-radius: 8.333333rem;
			    font-size: 1.083333rem;
			    color: #fff;
			    text-align: center;
			    box-shadow: 0 0.166666rem 0.416666rem 0 #F8CAA7;
			}
			.aui-list-item-arrow:before{
				width: 0.8rem;
				height: 0.8rem;
				margin-top: -0.3rem;
			}
			.clearfix :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;} 
		</style>
	</head>

	<body>
		<div class="scrollload-containernew">
			<div id="content" class="scrollload-contentnew" style="overflow: hidden;">
				<div id="content" class="scrollload-contentnew" style="overflow: hidden;">
				<div class="col-xs-12" style="float: none;padding:1rem 1rem 3rem 2rem">
					<img id="cover" src="" alt="" style="width: 6rem;height: 6rem;border-radius: 50%;border:2px solid #eee; vertical-align: middle;display: inline;">
					<p id="name" style="color: #282828;font-size: 1.6rem;font-weight: bold; vertical-align: middle;display: inline;"></p>
					<img src="../img/VIP1.png" class="vip-icon hide" style="position: absolute;left:4.5rem;top:5.5rem;width: 3.5rem;" alt="" />
					<img src="../img/VIP2.png" class="vip-icon-stop hide" style="position: absolute;left:4.5rem;top:5.5rem;width: 3.5rem;" alt="" />
					<div style="padding: 4rem 0;">
						<p id="bookCount" style="left: 0; width: 50%; height: 2rem; line-height: 2.0rem; color: #333333; font-size: 2.5rem; font-weight: bold; position: absolute;" align="center">0<span style="color: #999999;font-size: 1.3rem;">本<br />听完</span></p>
						<p id="duration" style="left: 50%; width: 50%; height: 2rem; line-height: 2.0rem; color: #333333; font-size: 2.5rem; font-weight: bold; position: absolute;" align="center">0<span style="color: #999999;font-size: 1.3rem;">分钟<br />学习时长</span></p>
					</div>
				</div>
				<div style="width: 100%;height:.83rem;background: #F8F8F8;"></div>
				<ul class="aui-list aui-media-list">
		            <li class="aui-list-item aui-list-item-middle" id="member">
		                <div class="aui-media-list-item-inner">
		                    <div class="aui-list-item-media" style="width: 3rem;">
		                        <img src="icon/king.png" style="width:3rem" class="aui-img-round aui-list-img-sm">
		                    </div>
		                    <div class="aui-list-item-inner aui-list-item-arrow" style="padding-top: 2rem;padding-bottom: 2rem;font-size: 1.7rem;">
                        		会员VIP 
                        		<span style="line-height:24px;float:right;margin-right: 5px;color:#ED8434 ;font-size: 13px;" class="vip-top-time"></span>
		                    </div>
		                </div>
		            </li>
		            <li class="aui-list-item aui-list-item-middle">
		                <div class="aui-media-list-item-inner">
		                    <div class="aui-list-item-media" style="width: 3rem;">
		                        <img src="icon/Invitation.png" style="width: 3rem;" class="aui-img-round aui-list-img-sm">
		                    </div>
		                    <div id="inviteFriend" class="aui-list-item-inner aui-list-item-arrow" style="padding-top: 2rem;padding-bottom: 2rem;font-size: 1.7rem;">
                        		邀请好友 <span style="display:none;line-height:24px;float:right;margin-right: 5px;color:#ED8434;font-size: 13px;" class="inviteFriendText">增加会期</span>
		                    </div>
		                </div>
		            </li>
		            <li class="aui-list-item aui-list-item-middle" id="coupon">
		                <div class="aui-media-list-item-inner">
		                    <div class="aui-list-item-media" style="width: 3rem;">
		                        <img src="icon/dɪskaʊnt.png" style="width:3rem" class="aui-img-round aui-list-img-sm">
		                    </div>
		                    <div class="aui-list-item-inner aui-list-item-arrow" style="padding-top: 2rem;padding-bottom: 2rem;font-size: 1.7rem;">
                        		优惠券
		                    </div>
		                </div>
		            </li>
		            <li class="aui-list-item aui-list-item-middle" id="code">
		                <div class="aui-media-list-item-inner">
		                    <div class="aui-list-item-media" style="width: 3rem;">
		                        <img src="icon/myList12@3x.png" style="width:3rem" class="aui-img-round aui-list-img-sm">
		                    </div>
		                    <div class="aui-list-item-inner aui-list-item-arrow" style="padding-top: 2rem;padding-bottom: 2rem;font-size: 1.7rem;">
                        		兑换码
		                    </div>
		                </div>
		            </li>
		            <li class="aui-list-item aui-list-item-middle">
		                <div class="aui-media-list-item-inner">
		                    <div class="aui-list-item-media" style="width: 3rem;">
		                        <img src="icon/myList02@3x.png" style="width: 3rem;" class="aui-img-round aui-list-img-sm">
		                    </div>
		                    <div id="kefu" class="aui-list-item-inner aui-list-item-arrow" style="padding-top: 2rem;padding-bottom: 2rem;font-size: 1.7rem;">
                        		有问题，联系客服
		                    </div>
		                </div>
		            </li>
		            
		        </ul>
			</div>
			<div id="footer" class="border-t" style="position: fixed;bottom: 0;left: 0;z-index: 99;width: 100%;height: 4.9rem;">
		        <ul class="flex-wrap" style="height: 4.9rem;">
		            <li tapmode="hover" id="home" class="flex-con" style="height: 4.9rem;background-size: 2rem 2rem;line-height: 7.8rem;">首页</li>
		            <li id="mine" tapmode="hover" class="flex-con" style="height: 4.9rem;background-size: 2rem 2rem;line-height: 7.8rem;">书架</li>
		            <li id="center" tapmode="hover" class="flex-con active" style="height: 4.9rem;background-size: 2rem 2rem;line-height: 7.8rem;">我的</li>
		        </ul>
		    </div>
		</div>
		<div class="mask" style="width: 100%;height: 100%;background: rgba(7, 17, 27, 0.6);position: fixed;top: 0;padding-top: 15rem;z-index: 100;display: none;">
			<div class="wxcode" style="width: 25rem;height: 25rem;border-radius: 6px;background: #FFFFFF;margin: 0 auto;padding-top: 5.5rem;text-align: center;">
				<p style="font-size: 2rem;font-weight: 500;margin: -3rem 0 1rem 0;">官方客服微信</p>
				<img src="img/ercode.jpg" style="width: 12rem;height: 12rem;margin: 0 auto;"/>
				<p style="color: #999999;font-size: 1.6rem;padding: 0 2rem;margin-top: 1rem;">不知道如何购买、兑换,或其他任何疑问,找客服聊聊吧</p>
			</div>
		</div>
	    <div id="warn" style="background: rgba(0, 0, 0, 0.7);text-align: center;border-radius: 0.25rem;color: #ffffff;position: fixed;z-index: 3000;top: 45%;left: 50%;width: 8em;margin-left: -4em;height: 3rem;line-height: 3rem;display: none;">请先登录！</div>
	</body>
	</script>
</html>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/purl.js"></script>
<script src="js/aui-toast.js" type="text/javascript" charset="utf-8"></script>
<script src="js/aui-dialog.js" type="text/javascript" charset="utf-8"></script>
<script id="transfer_tem" type="text/html">
	<div class="col-xs-12" align="center" style="float: none;">
		<img src="{{data.headimg | addFaceUrl}}" alt="" style="width: 9rem;height: 9rem;padding: 1rem;border-radius: 100%;"/>
		<p style="color: #282828;font-size: 1.6rem;font-weight: bold;margin-bottom: 5px;">{{data.nickname}}</p>
		<p style="color: #999999; font-size: 1rem;">音频转述师</p>
		<p style="color: #282828; font-size: 1.08rem;line-height:1.6666rem;text-align: left;padding-bottom: 1.67rem;">{{data.signature}}</p>
	</div>
	<div style="width: 100%;height:.83rem;background: #F8F8F8;"></div>
	<p style="color: #282828;font-size:1.5rem;font-weight: bold;padding-top: 2.08rem;margin-bottom: 0;padding-left: 15px;">共精编了{{data.book_count}}本书</p>
</script>

<script type="text/javascript">
	
	var toast = new auiToast();
	var type = GetQueryString('type');
	var totalpage = null;
	var updateInfoData = function(){
		if(userVip.type==1){
		  		$('.vip-icon').removeClass('hide')
		  		$('.vip-top-time').text('有效期至：'+userVip.expire_time).css('color','##fe9a35')
		  		$('.inviteFriendText').show()
		  	}else if(userVip.type==-1){
	  			$('.vip-top-time').text('VIP已到期，去续费').css('color','##fe9a35')
	  			$('.vip-icon-stop').removeClass('hide')
		  	}
	}
	getToken(updateInfoData);
		  $(function(){
			
			$("#home").click(function(){
				window.location.href = "index.html";
			});
			$("#mine").click(function(){
				window.location.href = "mine.html";
			});
			$("#code").click(function(){
				window.location.href = "redemptionCode.html";
			});
			$("#coupon").click(function(){
				window.location.href = "MyCoupon.html";
			});
			$("#member").click(function(){
				window.location.href = "memberPage.html";
			});
			$("#inviteFriend").click(function(){
				window.location.href = "memberPage.html?showInviteMask=1";
			});
			//分享的弹出
			
			$.ajax({
				type:"get",
				url:hostUrl + "user/duration/get?unionid=" + unionid,
				async:true,
				success: function(data){
					if (data.data) {
						document.getElementById('bookCount').firstChild.data = data.data.booknum;
						document.getElementById('duration').firstChild.data = data.data.duration;
					}
				}
			});
			
			var data = JSON.parse(window.sessionStorage.getItem("weixinData"));
			
			$("#cover").attr("src",data.data.userInfo.headImgUrl);
			$("#name").html(data.data.userInfo.nickname)
			
			$("#kefu").click(function(){
				$(".mask").show();
			})
		  	$(".mask").click(function(){
				$(this).hide();
			})
		  	$(".mask .wxcode").click(function(e){
				e.stopPropagation()
			})
		  	
		  	if(userVip.type==1){
		  		$('.vip-icon').removeClass('hide')
		  		$('.vip-top-time').text('有效期至：'+userVip.expire_time).css('color','##fe9a35')
		  		$('.inviteFriendText').show()
		  	}else if(userVip.type==-1){
	  			$('.vip-top-time').text('VIP已到期，去续费').css('color','##fe9a35')
	  			$('.vip-icon-stop').removeClass('hide')
		  	}
		  })
		
		  
		 
		 

	




		
</script>